<script >
import { ref,watch,defineComponent, toRefs, reactive, onMounted,onBeforeUnmount  } from 'vue';
import Sidebar from '../common/Sidebar.vue';
import Header from '../common/Header.vue';
import * as echarts from 'echarts';
import axios from "axios";
import 'echarts-liquidfill';
import {Plus} from "@element-plus/icons-vue";

export default defineComponent({
  name: "hotel",
  components: {
    Plus,
    Sidebar,
    Header,
  },
  data() {
    return {
      hotelDetail: [], // 酒店列表
      humanList: [], // 人员列表
      vehicleList: [], // 车辆列表
      editingVehicleRow: null,
      editingHumanRow: null,
      timer: null,
    };
  },
  mounted() {
    // 在组件挂载时发送请求获取商品信息
    this.fetchHotelDetail();
    this.fetchHumanList();
    this.fetchVehicleList();
    this.startTimer();

  },
  methods: {
    startTimer() {
      // 设置定时器，假设我们每秒钟调用一次 updateSomething 方法
      this.timer = setInterval(() => {
        this.fetchHotelDetail();
      }, 15000);
    },
    stopTimer() {
      // 清除定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null; // 将 timer 设置为 null，表示没有定时器在运行
      }
    },
    async deleteHuman(id){
      await axios.post(`http://localhost:8082/Human/deleteHuman`,{
        id:id,
      },{
        headers: {
          'Content-Type':'application/json',
        },
      });
      this.fetchHumanList();

    },
    async deleteVehicle(id){
      await axios.post(`http://localhost:8082/Vehicle/deleteVehicle`,{
        id:id,
      },{
        headers: {
          'Content-Type':'application/json',
        },
      });
      this.fetchVehicleList();
    },

    addHumanRow() {
      const newRow = {
        id: this.humanList.length > 0 ? parseInt(this.humanList[this.humanList.length-1].id)+1 : this.$route.params.id*100+this.humanList.length,// 根据实际情况，可能需要生成一个唯一的ID
        name: '空',
        job: '空',
        base: '空',
        birthday: '空',
        onboard: '空',
        sex: '空',
        phone: '空',
        hotelid: this.$route.params.id,
      };
      this.humanList.push(newRow);
      this.editingHumanRow = this.humanList.length-1;
      axios.post(`http://localhost:8082/Human/insertHuman`, {
        id: newRow.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },

    addVehicleRow() {
      const newRow = {
        id: this.vehicleList.length > 0 ? this.vehicleList[this.vehicleList.length-1].id+1 : this.$route.params.id*100+this.vehicleList.length,// 根据实际情况，可能需要生成一个唯一的ID
        lisence: '空',
        style: '空',
        base: '空',
        date: '空',
        hotelid: this.$route.params.id,
      };
      this.vehicleList.push(newRow);
      this.editingVehicleRow = this.vehicleList.length-1;
      axios.post(`http://localhost:8082/Vehicle/insertVehicle`, {
        id: newRow.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },

    handleVehicleEdit(index) {
      this.editingVehicleRow = index;
    },
    handleHumanEdit(index) {
      this.editingHumanRow = index;
    },

    async handleVehicleEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingVehicleRow = null;
      await axios.post("http://localhost:8082/Vehicle/updateData", {
        id:this.vehicleList[index].id,
        lisence: this.vehicleList[index].lisence,
        style: this.vehicleList[index].style,
        base: this.vehicleList[index].base,
        date: this.vehicleList[index].date,
        hotelid : this.vehicleList[index].hotelid,
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('员工信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新员工信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });

      console.log(this.staffList[index]);
    },

    async handleHumanEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingHumanRow = null;
      await axios.post("http://localhost:8082/Human/updateData", {id: this.humanList[index].id,
        name: this.humanList[index].name,
        job: this.humanList[index].job,
        base: this.humanList[index].base,
        birthday : this.humanList[index].birthday,
        onboard: this.humanList[index].onboard,
        sex: this.humanList[index].sex,
        phone: this.humanList[index].phone,
        hotelid : this.humanList[index].hotelid
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('员工信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新员工信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });

      console.log(this.humanList[index].qualification);
    },

    fetchHotelDetail() {
      console.log(this.$route.params.id);
      axios.post(`http://localhost:8082/searchHotel`, {
        id: this.$route.params.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
          .then(response => {
            this.hotelDetail = response.data; // 假设你有一个 hotelDetail 数据属性来存储单个酒店的详情
            console.log(this.hotelDetail);
            this.updateChart();
          })
          .catch(error => {
            console.error('获取酒店详情失败:', error);
          });
    },
    fetchHumanList() {
      console.log(this.$route.params.id);
      axios.post(`http://localhost:8082/Human/searchHumanByHotelId`, {
        id: this.$route.params.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
          .then(response => {
            this.humanList = response.data; // 假设你有一个 hotelDetail 数据属性来存储单个酒店的详情
            console.log(this.humanList);
          })
          .catch(error => {
            console.error('获取人员详情失败:', error);
          });
    },
     fetchVehicleList() {
      console.log(this.$route.params.id);
      axios.post(`http://localhost:8082/Vehicle/searchVehiclesByHotelId`, {
        id: this.$route.params.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
          .then(response => {
            this.vehicleList = response.data; // 假设你有一个 hotelDetail 数据属性来存储单个酒店的详情
            console.log(this.vehicleList);
          })
          .catch(error => {
            console.error('获取人员详情失败:', error);
          });
    },
    updateChart() {
      const capacity = parseInt(this.hotelDetail.capacity) ; // 使用默认值防止未定义
      const maxcapacity = parseInt(this.hotelDetail.maxcapacity) ;
      console.log(maxcapacity-capacity);
      const parking = parseInt(this.hotelDetail.parking) ;
      const maxparking = parseInt(this.hotelDetail.maxparking) ;
      const check = parseInt(this.hotelDetail.check) ;
      const maxcheck = parseInt(this.hotelDetail.maxcheck) ;
      const score = parseInt(this.hotelDetail.score) ;
      let capacitycolor;
      let checkcolor;
      if(capacity/maxcapacity<0.3){
        capacitycolor = '#3f9f48'
      }
      else if(capacity/maxcapacity>0.7){
        capacitycolor = '#e93540'
      }
      else {
        capacitycolor = '#FFFF00'
      }

      if(check/maxcheck<0.3){
        checkcolor = '#3f9f48'
      }
      else if(check/maxcheck>0.7){
        checkcolor = '#e93540'
      }
      else {
        checkcolor = '#FFFF00'
      }
      const option1 = {
        series: [{
          data: [
            {
              value: capacity,
            },
            {
              value: maxcapacity - capacity,
              name: undefined
            }
          ],
          color: [capacitycolor, '#d3d3d3'],
        }]
      };
      console.log(option1);
      const option2 = {
        series: [{
          data: [
            {
              value: parking,
            },
            {
              value: maxparking - parking,
              name: undefined
            }
          ]
        }]
      };
      const option3 = {
        series: [{
          data: [
            {
              value: check,
            },
            {
              value: maxcheck - check,
              name: undefined
            }
          ],
          color: [checkcolor, '#d3d3d3'],
        }]
      };
      const option4 = {
        series: [{
          data: [score/100, score/100-0.1, score/100-0.2, score/100-0.3],
        }]
      };
      const myChart = echarts.init(document.getElementById('myChart'));
      myChart.setOption(option1);
      const secondChart = echarts.init(document.getElementById('secondChart'));
      secondChart.setOption(option2);
      const thirdChart = echarts.init(document.getElementById('thirdChart'));
      thirdChart.setOption(option3);
      const reputationChart = echarts.init(document.getElementById('reputationChart'));
      reputationChart.setOption(option4);
    },
  },
  setup() {
    const state = reactive({
      option1: {
        title: {
          text: '接待量',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 0,
              },
              {
                value: 0,
                name: undefined
              }
            ],
            radius: ['40%', '70%'],
            color: ['#e93540', '#d3d3d3'],
            labelLine: {
              show: false // 隐藏引导线
            },
            label: {
              show: true, // 显示标签
              formatter: '{d}%', // 格式化标签为百分比
              position: 'inside',
            }
          },
        ],
      },
      option2: {
        title: {
          text: '停车位数量',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 0,
              },
              {
                value: 0,
                name: undefined
              }
            ],
            radius: ['40%', '70%'],
            color: ['#00ff00', '#e93540'],
            labelLine: {
              show: false // 隐藏引导线
            },
            label: {
              show: true, // 显示标签
              formatter: '{d}%', // 格式化标签为百分比
              position: 'inside',
            }
          },
        ],
      },
      option3: {
        title: {
          text: '入住率',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 0,
              },
              {
                value: 0,
                name: undefined
              }
            ],
            radius: ['40%', '70%'],
            color: ['#e93540', '#d3d3d3'],
            labelLine: {
              show: false // 隐藏引导线
            },
            label: {
              show: true, // 显示标签
              formatter: '{d}%', // 格式化标签为百分比
              position: 'inside',
            }
          },
        ],
      },
      option4:{
        series: [
          {
            type: "liquidFill",
            data: [0.6, 0.5, 0.4, 0.3],
            itemStyle: {
              normal: {
                shadowBlur: 0,
              },
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 5,
                borderColor: "#156ACF",
                shadowBlur: 20,
                shadowColor: "#156ACF",
              },
            },
          },
        ],
      }
    });
    let timer;
    const initeCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(state.option1)
    }
    const initSecondChart = () => {
      let secondChart = echarts.init(document.getElementById('secondChart'))
      // 绘制第二个图表
      secondChart.setOption(state.option2)
    }
    const initThirdChart = () => {
      let thirdChart = echarts.init(document.getElementById('thirdChart'))
      // 绘制第三个图表
      thirdChart.setOption(state.option3)
    }
    const initReputationChart = () => {
      let reputationChart = echarts.init(document.getElementById('reputationChart'))
      // 绘制第二个图表
      reputationChart.setOption(state.option4)
    }
    onMounted(() => {
      initReputationChart();
      initeCharts();
      initSecondChart(); // 初始化第二个图表
      initThirdChart();

    });
    return {
      state,
      ...toRefs(state),
    };
  },
});
</script>


<template>
  <body>
  <el-col style="height: 100vh;">
    <Header />
    <el-row style="height: 100vh;">
      <el-col :span="3" style="height: 100%;">
        <Sidebar />
      </el-col>
      <el-col :span="21" style="height: 800px; text-align: center;overflow-y: auto;" >
        <el-row style="background-color: #f7f7f7">
          <el-col :span="6">
            <div id="reputationChart" :style="{ width: '300px', height: '300px', backgroundColor:'#fff',borderRadius:'80px',marginLeft:'30px',marginTop:'20px'}"></div>
            <h2 :style="{ marginRight:'10px'}">信誉积分</h2>
          </el-col>
          <el-col :span="6"><div id="myChart" :style="{ width: '300px', height: '300px', backgroundColor:'#fff',borderRadius:'80px',marginLeft:'30px',marginTop:'20px'}"></div></el-col>
          <el-col :span="6"><div id="secondChart" :style="{ width: '300px', height: '300px', backgroundColor:'#fff',borderRadius:'80px',marginLeft:'30px',marginTop:'20px' }"></div></el-col>
          <el-col :span="6"><div id="thirdChart" :style="{ width: '300px', height: '300px', backgroundColor:'#fff',borderRadius:'80px',marginLeft:'30px',marginTop:'20px' }"></div></el-col>
        </el-row>

        <el-row style="margin-top: 30px;margin-bottom: 50px">
          <el-col :span="8"><label class="lbl-hotel">酒店ID:{{hotelDetail.id}}</label></el-col>
          <el-col :span="8"><label class="lbl-hotel">酒店名:{{hotelDetail.name}}</label></el-col>
          <el-col :span="8"><label class="lbl-hotel">位置:{{hotelDetail.location}}</label></el-col>
        </el-row>
        <el-card style="margin-left: 80px;margin-bottom: 30px;margin-right: 80px">
          <template #header>
            <h1>管理人员</h1>
          </template>
        <el-table :data="humanList" stripe  height="250"  style="margin: 25px;width: 1430px" >
          <el-table-column fixed prop="id" label="人员编号" width="120" />
          <el-table-column prop="name" label="姓名" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.name" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.sex" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.sex }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="job" label="职位" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.job" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.job }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="base" label="基础信息" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.base" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.base }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="birthday" label="出生日期" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.birthday" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.birthday }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="onboard" label="入职日期" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.onboard" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.onboard }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHumanRow === scope.$index" v-model="scope.row.phone" @blur="handleHumanEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHumanEdit(scope.$index)">
                {{ scope.row.phone }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="100">
            <template #default = "scope">
              <el-button link type="primary" @click="deleteHuman(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <template #footer><el-button color="#9d2933" circle size="large" plain @click="addHumanRow" ><el-icon><plus/></el-icon></el-button></template>
        </el-card>
        <el-card style="margin-left: 80px;margin-bottom: 30px;margin-right: 80px">
          <template #header>
            <h1>车辆信息</h1>
          </template>
        <el-table :data="vehicleList" stripe  height="250"  style="margin: 25px;width: 1430px" >
          <el-table-column fixed prop="id" label="车辆编号" width="120" align="center"/>
          <el-table-column prop="lisence" label="车牌号" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.lisence" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.lisence }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="style" label="车辆类型" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.style" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.style }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="base" label="车辆基础信息" width="250" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.base" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.base }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="车检日期" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingVehicleRow === scope.$index" v-model="scope.row.date" @blur="handleVehicleEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleVehicleEdit(scope.$index)">
                {{ scope.row.date }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="100" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="deleteVehicle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <template #footer><el-button color="#9d2933" circle size="large" plain @click="addVehicleRow" style="margin-right: 28px"><el-icon><plus/></el-icon></el-button></template>
        </el-card>
      </el-col>
    </el-row>
  </el-col>
  </body>
</template>

<style scoped>
@import "../../assets/css/global.css";
</style>